<script setup lang="ts">
import {ref, onMounted, computed, reactive, Ref, UnwrapRef} from "vue";
import useStore from "../../modules/store/platform"
import {ElMessage, ElMessageBox} from "element-plus";
const store = useStore()
// 数据渲染的列表
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
// @ts-ignore
let key: number = ref(0)
// 定义了一个类型判定
interface User {
  key: number
  name: string
  num: number
  price: number
  style: string
}
const formInline = reactive({
  additive: '',
  name: '',
  time: ''
})
// 修改内容的事件触发
// fetchData(currentPage.value);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const onSubmit = () => {
  // console.log(formInline.value)
  dialogVisible.value = false
  // console.log(formInline)
  if(formInline.additive === ''&&formInline.name === ''&&formInline.time === ''){
    ElMessage({
      type: 'error',
      message: '修改缺少参数,修改失败'
    })
    return
  }
  store.editA(formInline,key)
}
const handleEdit = (index: number, row: User) => {
  dialogVisible.value = true
  console.log(index, row)
  key = row.key
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
  store.filterB(row.key)
}
// 渲染完成时发送一个请求
onMounted(()=>{
  store.http()
})
</script>

<template>
  <el-table :data="store.searchList"
            max-height="610"
            style="width: 100%;margin: 30px 0">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="编号" width="100">
      <template #default="scope">
        {{scope.row.key}}
      </template>
    </el-table-column>
    <el-table-column label="分类名称" width="200">
      <template #default="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="添加者" width="200">
      <template #default="scope">
        {{scope.row.additive}}
      </template>
    </el-table-column>
    <el-table-column label="添加时间" width="200">
      <template #default="scope">
        {{scope.row.time}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button>
        <el-button
            size="small"
            class="button"
            type="warning"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label='分类名称'>
        <el-input v-model.trim="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="添加者">
        <el-input v-model.trim="formInline.additive" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"
        />
<!--        <el-input v-model.trim="formInline.time" placeholder="Approved by" clearable />-->
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="primary" @click="onSubmit">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
